<template>
	<view class="page-container">
		<view class="invitee-banner">
			<image :src="baseImageUrl + '/invite/invitee_banner@2x.png'" style="width: 100%; height: 336rpx"></image>
			<view class="rules" @tap="toogleRuleShow">活动规则</view>
		</view>

		<view class="invitee-container">
			<view class="invitee-title">
				<image :src="baseImageUrl + '/invite/bean_left@2x.png'" style="width: 200rpx; height: 40rpx"></image>
				<text>助力列表</text>
				<image :src="baseImageUrl + '/invite/bean_right@2x.png'" style="width: 200rpx; height: 40rpx"></image>
			</view>

			<view class="invitee-list">
				<view class="invitee-item" v-for="(item, index) in inviteeList" :key="index">
					<view class="item-name">
						<image :src="item.inviteeLogo"
							style="width: 52rpx; height: 52rpx; border-radius: 50%; background-color: #eee"></image>
						<text>{{ item.inviteeName }}</text>
					</view>

					<view class="item-phone">{{ util.phoneHidden(item.inviteePhone) }}</view>
				</view>
			</view>
		</view>

		<u-popup :show="actRuleShow" @close="closeQrcode"
			custom-style="width:100%;border-radius:24rpx;background:rgba(0,0,0,0);">
			<view class="act-rule">
				<view class="rule-container">
					<view class="rule-title">
						<text>活动规则</text>
					</view>
					<view class="rule-content">
						<view class="rule-item">
							<text class="rule-no">1.</text>
							<text>活动时间：2021-10-18 至 2022-01-18；</text>
						</view>
						<view class="rule-item">
							<text class="rule-no">2.</text>
							<text>{{ 1 == inviteActivity.inviteSucFlag ? '被邀请人注册成功即算邀请成功' : '被邀请人注册成功且下单支付成功后才算邀请成功' }}；</text>
						</view>
						<view class="rule-item">
							<text class="rule-no">3.</text>
							<text>本着邀请越多、奖励越多的原则，分为多个邀请阶段，点击每阶段礼包入口可查看具体奖励内容；</text>
						</view>
						<view class="rule-item">
							<text class="rule-no">4.</text>
							<text>在活动周期内邀请人数达到相应等级时，会发放对应的奖励礼品，积分和优惠券会自动发放，达标后可至“我的”页面查看；</text>
						</view>
						<view class="rule-item">
							<text class="rule-no">5.</text>
							<text>请确保已注册并成功登陆，以便礼品正常发放；</text>
						</view>
						<view class="rule-item">
							<text class="rule-no">6.</text>
							<text>最终解释权归银行平台所有；</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- <view class="qrcode-container shadow-bg {{actRuleShow?'':'hide'}}" catchtouchmove='preventTouchMove'>
    <view class="act-rule">
      <view class="rule-container">
        <view style="width:100%;color:#666;text-align: right;font-size:0.32rem;">
          <i class="iconfont icon-icon-test4" bindtap='toogleRuleShow'></i>
        </view>
        <view class="rule-title">
          <text>活动规则</text>
        </view>
        <view class="rule-content">
          <view class="rule-item">
            <text class="rule-no">1.</text>
            <text>活动时间：2021-10-18 至 2022-01-18；</text>
          </view>
          <view class="rule-item">
            <text class="rule-no">2.</text>
            <text>{{1 == inviteActivity.inviteSucFlag ? '被邀请人注册成功即算邀请成功' : '被邀请人注册成功且下单支付成功后才算邀请成功'}}；</text>
          </view>
          <view class="rule-item">
            <text class="rule-no">3.</text>
            <text>本着邀请越多、奖励越多的原则，分为多个邀请阶段，点击每阶段礼包入口可查看具体奖励内容；</text>
          </view>
          <view class="rule-item">
            <text class="rule-no">4.</text>
            <text>在活动周期内邀请人数达到相应等级时，会发放对应的奖励礼品，积分和优惠券会自动发放，达标后可至“我的”页面查看；</text>
          </view>
          <view class="rule-item">
            <text class="rule-no">5.</text>
            <text>请确保已注册并成功登陆，以便礼品正常发放；</text>
          </view>
          <view class="rule-item">
            <text class="rule-no">6.</text>
            <text>最终解释权归银行平台所有；</text>
          </view>
        </view>
      </view>
    </view>
    <icon type="cancel" role="img" size="40" color="#fff" class="rule-close" catchtap="toogleRuleShow"></icon>
  </view> -->
	</view>
</template>
<script module="util" lang="wxs" src="../../../utils/util.wxs"></script>
<script>
	const app = getApp();

	const util = require('./../../../utils/util.js');
	import {
		http
	} from '@/utils/commonRequest.js'

	export default {
		components: {},
		data() {
			return {
				baseUrl: app.globalData.baseurl,
				baseImageUrl: app.globalData.baseImageUrl,
				inviteeList: null,
				show: false,
				actRuleShow: false,

				inviteActivity: {
					inviteSucFlag: 0
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let that = this;
			that.getInviteeList();
		},
		methods: {
			/** 邀请奖励列表数据 */
			getInviteeList: function() {
				http.get('inviteWithGift/getInviteActivity').then((res) => {
					res = res.data
					console.log(res);

					if (res.code == '200') {
						let configs = res.inviteActivity.configs;
						console.log(configs);
						configs.forEach((v) => {
							if (v.inviteeInfo && v.inviteeInfo.length > 0) {
								this.inviteeList = v.inviteeInfo
							}
						});
					} else {
						util.message(res.msg, function() {
							uni.switchTab({
								url: '/pages/index/index'
							});
						});
					}
				});
			},

			/** 规则显示 */
			toogleRuleShow: function() {
				this.actRuleShow = !this.actRuleShow
			},

			closeQrcode: function() {
				this.actRuleShow = false
			}
		}
	};
</script>
<style>
	page {
		background-color: #fff;
	}

	.page-container {
		height: 1000rpx;
		width: 100%;
	}

	.invitee-banner {
		position: relative;
	}

	.rules {
		position: absolute;
		left: 38rpx;
		top: 206rpx;
		width: 169rpx;
		height: 58rpx;
		font-size: 28rpx;
		line-height: 58rpx;
		text-align: center;
		color: #f86657;
		background: linear-gradient(180deg, #fff 0%, #ffd2cd 100%);
		border-radius: 8rpx;
		letter-spacing: 2.16rpx;
		font-weight: 600;
	}

	.invitee-container {
		position: relative;
		top: -20rpx;
		border-radius: 16rpx;
		background-color: #fff;
	}

	.invitee-title {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 52rpx;
	}

	.invitee-title text {
		margin: 0 30rpx;
		font-size: 34rpx;
		color: #5d392c;
		font-weight: 500;
		letter-spacing: 0.48rpx;
	}

	.invitee-list {
		margin-top: 52rpx;
		padding: 0 72rpx;
		overflow-y: auto;
		height: 700rpx;
	}

	.invitee-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 48rpx;
	}

	.item-name {
		display: flex;
		align-items: center;
	}

	.item-name text {
		margin-left: 28rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
	}

	.item-phone {
		font-size: 28rpx;
		color: #666;
	}

	.qrcode-container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.shadow-bg {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 199;
	}

	.hide {
		display: none;
	}

	.act-rule {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 20rpx;
		width: 640rpx;
		background: linear-gradient(141deg, #ffc996 0%, #fc4c2c 100%);
		border-radius: 20rpx;
		margin: 0 auto;
	}

	.rule-container {
		background-color: #fff;
		height: 100%;
		position: relative;
		z-index: 99;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.rule-title {
		padding-bottom: 20rpx;
		text-align: center;
	}

	.rule-content {
		font-size: 30rpx;
	}

	.rule-item {
		display: flex;
		padding-bottom: 10rpx;
	}

	.rule-item text {
		line-height: 45rpx;
	}

	.rule-no {
		padding-right: 5rpx;
	}

	.rule-close {
		position: absolute;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
